<template>
    <el-row class="tac">
        <el-col :span="12">
            <el-menu :router = "true" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-submenu :index="item.index" v-for="item in menuData" :key="item.index">
                    <template slot="title">
                        <span>{{item.name}}</span>
                    </template>
                    <el-menu-item :index="subItem.index" v-for="subItem in item.subMenudata" :key="subItem.index">{{subItem.name}}</el-menu-item>
                </el-submenu>
            </el-menu>

        </el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                menuData: [
                    {
                        index: '1',
                        name: '学生管理',
                        subMenudata: [{
                            index: '/home/studentAdd',
                            name: '新增学生',
                        }, {
                            index: '/home/studentsList',
                            name: '学生列表',
                        }],
                    },
                    {
                        index: '2',
                        name: '班级管理',
                        subMenudata: [{
                            index: '/home/classAdd',
                            name: '新增班级',
                        }, {
                            index: '/home/classesList',
                            name: '班级列表',
                        }]
                    },
                    {
                        index: '3',
                        name: '专业管理',
                        subMenudata: [{
                            index: '/home/subjectsList',
                            name: '专业列表',
                        }]
                    },
                    {
                        index: '4',
                        name: '课程管理',
                        subMenudata: [{
                            index: '/home/courseAdd',
                            name: '新增课程',
                        },
                        {
                            index: '/home/coursesList',
                            name: '课程列表',
                        }]
                    },
                    {
                        index: '5',
                        name: '教师管理',
                        subMenudata: [{
                            index: '/home/teacherAdd',
                            name: '新增教师',
                        },
                        {
                            index: '/home/teachersList',
                            name: '教师列表',
                        }]
                    },
                    {
                        index: '6',
                        name: '班主任管理',
                        subMenudata: [{
                            index: '/home/directorAdd',
                            name: '新增班主任',
                        },
                        {
                            index: '/home/directorsList',
                            name: '班主任列表',
                        }]
                    },
                ]
            }
        },
    }
</script>

<style lang="scss" scoped>
    .el-row {
        width: 100%;

        .el-col {
            width: 100%;

            .el-menu {
                .el-submenu {
                    .el-menu-item-group {
                        .el-menu-item-group-title {
                            padding: 0px;
                        }
                    }
                }
            }
        }
    }
</style>